<template>
  <div class="box">
    <div class="header">
      <div class="search-form">
        <el-form
          ref="searchForm"
          class="el-form-box"
          label-width="80px"
          :model="searchForm"
          :rules="rules"
        >
          <el-form-item label="网点名称" required prop="networkNameId">
            <el-select
              v-model="searchForm.networkNameId"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in OutletsList"
                :key="item.id"
                :label="item.networkName"
                :value="item.networkName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称" prop="clientId">
            <el-select
              v-model="searchForm.clientId"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.clientName"
                :value="item.clientName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围" required prop="times">
            <el-date-picker
              v-model="searchForm.times"
              clearable
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              class="cx"
              @click="querySubmit('searchForm')"
            >查询</el-button>
            <el-button
              class="cz"
              @click="resetForm('searchForm')"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="chart-table">
      <div class="left-chart">
        <div class="chart-header">
          <span>客户收入总和排名</span>
          <div>
            <el-select
              v-model="ascOrDesc1"
              placeholder="请选择"
              @change="ascOrDescChange($event, 'chart')"
            >
              <el-option :key="0" label="收入总和从低到高" :value="0" />
              <el-option :key="1" label="收入总和从高到低" :value="1" />
            </el-select>
          </div>
        </div>
        <div ref="mychart" class="eChart" />
      </div>
      <div class="right-table">
        <div class="table-header">
          <span>目的省份收入总和排名</span>
          <div>
            <el-select
              v-model="ascOrDesc2"
              placeholder="请选择"
              @change="ascOrDescChange($event, 'table')"
            >
              <el-option :key="0" label="收入总和从高到低" :value="0" />
              <el-option :key="1" label="收入总和从低到高" :value="1" />
            </el-select>
          </div>
        </div>
        <div class="table-box">
          <el-table
            border
            :cell-style="{ textAlign: 'center' }"
            :data="cityTotalData"
            fit
            :header-cell-style="{
              textAlign: 'center',
              backgroundColor: '#ccc',
              color: '#333333',
            }"
            height="530px"
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column prop="province" label="路线" />
            <el-table-column prop="income" label="本期收入（元）" />
          </el-table>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="汇总" name="collect">
        <el-row type="flex" justify="space-between">
          <el-col :span="24">
            <div>
              当前页共{{
                allTableData.list.data ? allTableData.list.data.length : 0
              }}项
            </div>
          </el-col>
          <el-col :span="5">
            <div class="flex-end">
              <el-button type="primary" @click="onSubmit">新增</el-button>
              <el-button type="primary" @click="onSubmit">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                v-if="
                  allTableData && allTableData.list && allTableData.list.data
                "
                :loading="false"
                :data="allTableData.list.data"
                :th="allTableData.fields"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="currentPage4"
            :page-size="pageSize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="明细" name="detail">
        <el-row type="flex" justify="space-between">
          <el-col :span="15">
            <div>共{{ total }}项</div>
          </el-col>
          <el-col :span="4">
            <div class="flex-end">
              <el-button type="primary" @click="onSubmit">导出</el-button>
              <el-button type="primary" @click="onSubmit">数据说明</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                v-if="tableData1 && tableData1.list && tableData1.list.data"
                :loading="false"
                :data="tableData1.list.data"
                :th="tableData1.fields"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="currentPage4"
            :page-size="pageSize"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getClientIncomeRank,
  getClientGoCollect,
  provinceIncomeRank,
  searchDetail,
  selectByName
} from '@/api/client'
import { getOutletsList } from '@/api/dashboard'
export default {
  data() {
    return {
      searchForm: {
        networkNameId: '',
        clientId: '',
        startTime: '',
        endTime: '',
        times: []
      },
      rules: {
        networkNameId: [
          { required: true, message: '请选择网点', trigger: 'change' }
        ],
        times: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      ascOrDesc1: 1,
      ascOrDesc2: 1,

      cityTotalData: [],

      activeName: 'collect',

      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      OutletsList: [],
      options: [],
      value: '',
      tableData1: [],
      allTableData: { fields: [], list: [] },

      chartData: {}
    }
  },
  mounted() {
    this.getOutlets()
    this.getClientName()
  },
  updated() {
  },
  methods: {
    async getClientName() {
      const res = await selectByName()
      this.options = res.data
    },

    /**
     * selectChange
     */
    ascOrDescChange(val, str) {
      if (str == 'chart') {
        this.getClientIncomeRank()
      } else {
        this.getProvinceIncomeRank()
      }
    },

    /**
     * 结算网点列表
     *  */
    async getOutlets() {
      const res = await getOutletsList()
      this.OutletsList = res.data
    },
    /**
     * 查询
     */
    querySubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchForm.startTime = this.searchForm.times[0]
          this.searchForm.endTime = this.searchForm.times[1]
          // delete this.searchForm.times
          this.getClientIncomeRank()
          this.getProvinceIncomeRank()
          this.getClientGoCollect()
        } else {
          return false
        }
      })
    },
    /**
     * 重置
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * 客户收入总和排名
     */
    getClientIncomeRank() {
      getClientIncomeRank({
        ascOrDesc: this.ascOrDesc1,
        ...this.searchForm
      }).then(res => {
        if (res.code == 200) {
          this.chartData = res.data
          this.initEcharts()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    /**
     * 目的省份收入总和排名
     */
    getProvinceIncomeRank() {
      provinceIncomeRank({
        ascOrDesc: this.ascOrDesc2,
        ...this.searchForm
      }).then(res => {
        if (res.code == 200) {
          this.cityTotalData = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },

    /**
     * 汇总客户流向明细
     */
    getClientGoCollect() {
      if (this.searchForm.startTime === '') {
        this.$message('请选择时间')
        return
      }
      getClientGoCollect({
        ...this.searchForm,
        pageDate: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.code == 200) {
          this.allTableData = res.data
        }
      })
    },
    searchDetail() {
      if (this.searchForm.startTime === '') {
        this.$message('请选择时间')
        return
      }
      searchDetail({
        ...this.searchForm,
        pageDate: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.code == 200) {
          this.tableData1 = res.data
          this.total = res.data.list.total
        }
      })
    },

    // 柱状图
    initEcharts() {
      const option = {
        aria: {
          decal: {
            enabled: true,
            decal: {
              show: true
            }
          }
        },
        legend: {
          left: 'right',
          data: ['收入', '做量']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: 'black'
          }
        },
        yAxis: {
          type: 'category',
          data: this.chartData.clientName,
          axisLabel: {
            color: 'black'
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '主系列',
            type: 'bar',
            data: this.chartData.income,
            barWidth: 30,
            itemStyle: {
              color: '#2087D0',
              barBorderRadius: [10, 10, 10, 10]
            }
          }
        ]
      }
      const myChart = echarts.init(this.$refs.mychart) // 图标初始化
      myChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },

    /**
     * 操作按钮
     */
    onSubmit() { },

    /**
     * tab切换change
     */
    handleClick(tab) {
      this.pageSize = 10
      this.currentPage4 = 1
      if (tab.name == 'collect') {
        this.getClientGoCollect()
      } else {
        this.searchDetail()
      }
    },

    /**
     * 每页条数变化
     */
    handleSizeChange(val) {
      this.pageSize = val
      this.getClientGoCollect()
      this.searchDetail()
    },
    /**
     * 页数变化
     */
    handleCurrentChange(val) {
      this.currentPage4 = val
      this.getClientGoCollect()
      this.searchDetail()
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
.header {
  .search-form {
    // border-bottom: 1px solid #ccc;
    .el-form-box {
      display: flex;
    }
  }
}

.chart-table {
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  .left-chart {
    width: 60%;
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .eChart {
      width: 100%;
      height: 530px;
    }
  }

  .right-table {
    width: calc(40% - 10px);
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-left: 10px;
    box-sizing: border-box;

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.left {
  height: 600px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  flex-flow: column;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.l-top {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    margin-left: 20px;
  }

  div {
    margin-right: 20px;
  }
}

.right {
  height: 600px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  border: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
